﻿<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>个人中心首页</title>
    <link th:href="@{/static/css/public.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/static/css/user.css}" rel="stylesheet" type="text/css" />
    <script type="text/javascript" th:src="@{/static/js/jquery-1.3.2.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/html5.js}"></script>
</head>
<body>
<!--header-->
<header class="header">
    <!--topBar-->
    <div class="topBar" th:replace="/top_bar :: .topBar"></div>
    <!--//topBar-->
  <!--headerMain-->
    <div class="headerMain layout clearfix" th:replace="/header_main :: .headerMain"></div>
  <!--//headerMain-->
  <!--headerNav-->
  <div class="headerNav" th:replace="/header_nav :: .headerNav"></div>
  <!--//headerNav-->
</header>
<!--//header-->
<!--container-->
<div class="container">
	<!--user  用户中心-->
	<div class="layout clearfix user">
    	<!--user-aside  用户侧边栏-->
    	<div class="user-aside">
        	<div class="user-list-items">
            	<h2 class="user-list-tit">个人中心</h2>
                <ul class="user-list">
                	<li class="cur"><a href="#">我的个人中心</a></li>
                    <li><a href="#">我的订单</a></li>
                </ul>
            </div>
            <div class="user-list-items">
            	<h2 class="user-list-tit">账户管理</h2>
                <ul class="user-list">
                	<li><a href="#">收货地址管理</a></li>
                    <li><a href="#">修改密码</a></li>
                </ul>
            </div>
        </div>
        <!--//user-aside-->
        <!--user-main  用户主体-->
        <div class="user-main">
        	<div class="user-info">
            	<div class="clearfix">
                	<span><img th:src="@{/static/images/user-avatar_80x80.jpg}" class="user-avatar"/></span>
                	<strong class="user-name" th:text="${session.potalSessionUser}">逛店专业户</strong>
                    <strong class="user-welcome">欢迎来到用户中心~</strong>
                </div>
            </div>
            <script>
				$(document).ready(function(){
					$('.user-avatar').mouseover(function(){
						$(this).attr('src','/static/images/user-avatar_hover_80x80.jpg');
					});
					$('.user-avatar').mouseleave(function(){
						$(this).attr('src','/static/images/user-avatar_80x80.jpg');
					});
				});
			</script>

            <!--user-about-orders  用户未支付订单-->
            <div class="user-about-items user-about-orders">
            	<div class="user-about-hd">
                	<h3 class="user-about-tit">未支付订单</h3>
                </div>
                <div class="user-about-bd">
                	<div class="user-about-box user-about-none" style="display:none;">  <!--无信息时显示-->
                    	<p>您暂时没有未支付订单，<a href="#">赶快去购物吧~</a></p>
                    </div>
                    <div class="user-about-box user-about-con">   <!--有信息时显示-->
                    	<div class="my-orders">
                        	<table class="orders-table">
                            	<tr>
                                	<td class="orders-pic-td" width="15%"><img th:src="@{/static/picture/img_big.jpg}" class="orders-pic"/></td>
                                    <td width="38%">订单号：<span class="orders-number">1140424450009291</span></td>
                                    <td width="15%"><strong class="orders-price">￥1969</strong></td>
                                    <td width="15%"><a class="orders-detail" href="#">订单详情</a></td>
                                    <td class="tc" width="17%"><a class="orange-btn buynow" href="#">立即支付</a></td>
                                </tr>
                                <tr>
                                    <td class="orders-pic-td" width="15%"><img th:src="@{/static/picture/img_big.jpg}" class="orders-pic"/></td>
                                    <td width="38%">订单号：<span class="orders-number">1140424450009291</span></td>
                                    <td width="15%"><strong class="orders-price">￥1969</strong></td>
                                    <td width="15%"><a class="orders-detail" href="#">订单详情</a></td>
                                    <td class="tc" width="17%"><a class="orange-btn buynow" href="#">立即支付</a></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!--//user-about-orders-->
            
            <!--user-about-orders  用户已支付订单-->
            <div class="user-about-items user-about-orders">
            	<div class="user-about-hd">
                	<h3 class="user-about-tit">已支付订单</h3>
                </div>
                <div class="user-about-bd">
                	<div class="user-about-box user-about-none">  <!--无信息时显示-->
                    	<p>您暂时没有已支付订单，<a href="#">挑挑喜欢的商品去>></a></p>
                    </div>
                    <div class="user-about-box user-about-con" style="display:none;">   <!--有信息时显示-->
                    	<div class="my-orders">
                        	<table class="orders-table paid-orders-table">
                            	<tr>
                                	<td class="orders-pic-td" width="15%"><img th:src="@{/static/picture/img_big.jpg}" class="orders-pic"/></td>
                                    <td width="38%">订单号：<span class="orders-number">1140424450009291</span></td>
                                    <td width="15%"><strong class="orders-price">￥1969</strong></td>
                                    <td width="15%"><a class="orders-detail" href="#">订单详情</a></td>
                                    <td class="tc" width="17%">&nbsp;</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!--//user-about-orders-->
            
            <!--user-about-cart  购物车-->
            <div class="user-about-items user-about-cart">
            	<div class="user-about-hd">
                	<h3 class="user-about-tit">购物车</h3>
                    <a class="view-cart" href="#">查看购物车>></a>
                </div>
                <div class="user-about-bd">
                	<div class="user-about-box user-about-none" style="display:none;">  <!--无信息时显示-->
                    	<p>您的购物车还是空的，<a href="#">赶快去购物吧~</a></p>
                    </div>
                    <div class="user-about-box user-about-con">   <!--有信息时显示-->
                    	<div class="my-cart">
                        	<ul class="clearfix my-cart-list">
                            	<li>
                                	<a href="#">
                                    	<img th:src="@{/static/picture/img_big.jpg}"/>
                                        <p>苹果（APPLE）iPho..</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img th:src="@{/static/picture/img_big.jpg}"/>
                                        <p>苹果（APPLE）iPho..</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--//user-about-cart-->
            
        </div>
        <!--//user-main-->
    </div>
    <!--//user-->
</div>
<!--//container-->
<!--footer-->
<footer class="footer" th:replace="/footer :: .footer"></footer>
<!--//footer-->
</body>
</html>